<template>
    <div class="quiz-start">
		<y-nav title="超准！十道题看透你的爱情观" :shareData="shareData"></y-nav>
        <img src="../assets/quiz_desc.png" alt="" class="quiz-desc" :class="marginForX">
        <div class="start-quiz">
			<div class="start-quiz-back" :style="backActiveStyle"></div>
			<div class="start-quiz-front" @touchstart="touchStart" @touchend="touchEnd" :style="activeStyle">开始测试</div>
        </div>
    </div>
</template>
<script>
import Nav from '@/components/nav';
import shareData from './data/shareData.js';
export default {
	components: {
		[Nav.name]: Nav
	},
    data() {
        return {
            activeStyle: {},
			backActiveStyle: {},
			shareData
        }
    },
    methods: {
        touchStart() {
            this.activeStyle = { background: '#fa6166', color: '#fff'};
            this.backActiveStyle = { background: '#fff' };
        },
         touchEnd() {
            this.$router.push('/official-activity/quiz-quiz');
        },
	},
	computed: {
		marginForX() {
			return this.$utils.isIphoneX() ? 'marginForX' : '';
		}
	}
}
</script>
<style>
.quiz-start {
    background-image: url('../assets/quiz_start_bg.png');
    background-size: cover;
	margin-top: 1.2rem;
	font-size: 0;
	height: 92vh;
	
   & .quiz-desc{
       width: 5.98rem;
       height: 4.69rem;
       /* margin-top: 4rem; */
	   margin-left: 0.8rem;
	   position: absolute;
		bottom: 3.1rem;
   }
   & .start-quiz {
        margin-left: 55%;
        margin-top: 1rem;
		/* padding-bottom: 18%; */
		font-size: 0.5rem;
		position: absolute;
		bottom: 1.2rem;
   }
   & .marginForX {
		margin-top: 72%;
		margin-bottom: 6%;
   }
   & .start-quiz-back{
       width: 2.46rem;
       height: .81rem;
       background: #f4d114;
       border: 3px solid #000;
   }
   & .start-quiz-front{
	   font-family: happyfont;
	   font-weight: bold;
       width: 2.46rem;
       height: .81rem;
       background: #fff;
       border: 3px solid #000;
       text-align: center;
        margin-top: -27.5%;
        margin-left: -3.8%;
   }
}
</style>

